<!--
 * @Author: your name
 * @Date: 2022-04-27 09:38:50
 * @LastEditTime: 2023-05-11 16:18:30
 * @LastEditors: wangwang 2723008256@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jzjy\src\views\ProductCenter\index.vue
-->
<template>
  <div id="container">
    <div class="banner">
      <el-carousel :height="bannerHeight + 'px'">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <img
            :src="item.file_url"
            alt="banner图"
            @click="advert(item.http_url)"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 精选产品 -->
    <div class="recommend" v-show="jingxuanshow">
      <div class="jiaofuBooks">
        <div class="tips">
          <!-- <h2>为你精选</h2>
          <p>教辅图书</p> -->
        </div>
        <div class="bookSwiper">
          <div class="booksList" ref="booksList">
            <div
              class="box"
              v-for="item in topbooklist"
              :key="item.id"
              @click="productDetails(item.id, item.type_id)"
            >
              <div class="pic">
                <img :src="item.file_url" alt="" />
              </div>
              <h4>{{ item.title }}</h4>
              <!-- <p>权威编者：{{ item.author }}</p> -->
            </div>
          </div>
          <span class="leftN anniu" @click="bookLeft"
            ><i class="el-icon-arrow-left"></i
          ></span>
          <span class="rightN anniu" @click="bookRight"
            ><i class="el-icon-arrow-right"></i>
          </span>
        </div>
      </div>
    </div>
    <!-- 在线课程 -->
    <div class="classOnline" v-if="classShow">
      <div class="title2">
        <!-- <span></span> -->
        <h3>在线课程</h3>
        <p v-if="seeAll" @click="goAllclass">查看全部</p>
      </div>
      <div class="classBox">
        <div
          class="box"
          v-for="item in courselist.slice(0, 4)"
          :key="item.id"
          @click="productDetails(item.id, item.type_id)"
        >
          <img :src="item.file_url" />
          <div class="activename">{{ item.title }}</div>
          <!-- <p>{{ item.author }}</p> -->
        </div>
      </div>
    </div>
    <!-- 产品分类列表 -->
    <div class="series">
      <div class="content">
        <div class="productBox">
          <div class="left">
            <div class="top">
              <div class="title">
                <h2>独家产品</h2>
                <!-- <span>查看更多></span> -->
              </div>
              <div class="taps">
                <div
                  class="tap"
                  v-for="item in producttypelist"
                  :key="item.id"
                  @click="handleClickTaps(item.id)"
                  :class="{ choseTap: activeName == item.id }"
                >
                  <h3>{{ item.title }}</h3>
                  <span></span>
                </div>
              </div>
              <div class="box">
                <div
                  class="boxChinese"
                  v-for="item in productlist"
                  :key="item.id"
                  @click="productDetails(item.id, item.type_id)"
                >
                  <div class="pic">
                    <img :src="item.file_url" alt="" />
                  </div>
                  <div class="msg">
                    <h3>{{ item.title }}</h3>
                    <!-- <p>{{ item.author }}</p> -->
                  </div>
                </div>
              </div>
              <div class="nothingShow" v-if="nothingShow">
                <img src="../../assets/img/nothing.png" alt="" />
              </div>
            </div>
          </div>
          <div class="right">
            <div class="title3">
              <span></span>
              <h3>热门搜索榜</h3>
            </div>
            <div
                class="boxHot"
                v-for="(item, index) in hotsearchbooklist"
                :key="item.id"
                @click="productDetails(item.id, item.type_id)"
                v-show="hotsearchbooklist.length != 0"
              >
                <div class="qian3" v-if="index + 1 <= 3">
                  <div class="pic">
                    <img :src="item.file_url" alt="" />
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="msg">
                    <h3>{{ item.title }}</h3>
                    <!-- <p>权威编者：{{ item.author }}</p> -->
                    <div
                      class="goProduct"
                      @click="productDetails(item.id, item.type_id)"
                    >
                      查看样书
                    </div>
                  </div>
                </div>
                <div class="lists" v-if="index + 1 > 3">
                  <h4>{{ index + 1 }}</h4>
                  <p>{{ item.title }}</p>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Throttle } from "../../utils/deth";
import { banner, productinfo, userinfo } from "../../api/http.js";
export default {
  components: {},
  data() {
    return {
      bannerHeight: "", //轮播图的自适应高度
      bannerList: [], //产品页banner广告图列表
      topbooklist: [], //精选图书列表
      courselist: [], //在线课程列表
      producttypelist: [], //产品分类列表
      productlist: [], //产品列表
      hotsearchbooklist: [], //热门搜索榜
      nothingShow: false, //空图展示
      activeName: 1, //当前选中的tap值
      boxLeft: 0, //图片滚动距离
      is_jtxly: 0, //是否为精听训练营
      seeAll: false, //是否显示查看全部在线课程
      classShow: false, //没有课程时隐藏
      jingxuanshow: false, //为您精选是否展示
    };
  },
  created() {
    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });
    //判断过期
    userinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
        this.$router.push({
          name: "Login",
          query: {
            isgq: 1,
          },
        });
      }
    });
    //获取产品页banner图
    banner({
      md5key: localStorage.getItem("md5key"),
      systypes_id: 10001,
      device_type_id: 201,
    }).then((res) => {
      console.log(res, "产品页banner");
      if (res.retInt == 1) {
        this.bannerList = res.retRes;
      } else if (res.retInt == 0) {
        this.$message.error(res.retErr);
      }
    });
    //产品首页中心
    productinfo({
      md5key: localStorage.getItem("md5key"),
      type_id: 1, //默认产品分类为高中语文
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "产品首页中心");
        const data = res.retRes;
        this.topbooklist = data.topbooklist; //顶部精选
        if (data.topbooklist.length == 0) {
          this.jingxuanshow = false;
        } else {
          this.jingxuanshow = true;
        }
        this.courselist = data.courselist; //在线课程
        if (data.courselist.length > 4) {
          this.seeAll = true;
          this.classShow = true;
        } else if (data.courselist.length <= 4 && data.courselist.length > 0) {
          this.seeAll = false;
          this.classShow = true;
        } else if (data.courselist.length < 1) {
          this.classShow = false;
        }
        this.producttypelist = data.producttypelist; //产品分类列表
        this.productlist = data.productlist; //产品列表
        this.hotsearchbooklist = data.hotsearchbooklist; //热搜榜列表
      } else {
        this.$message.error(res.retErr);
      }
    });
  },
  mounted() {
    //获取可视化窗口宽度
    const screenWidth = document.documentElement.clientWidth;
    console.log(screenWidth / (1920 / 280), "asdadasd");
    this.bannerHeight = screenWidth / (1920 / 280);
    const that = this;
    window.onresize = () => {
      return (() => {
        const screenWidth = document.documentElement.clientWidth;
        if (screenWidth >= 1200) {
          that.bannerHeight = screenWidth / (1920 / 280);
        } else if (screenWidth < 1200) {
          that.bannerHeight = 1200 / (1920 / 280);
        }
      })();
    };
  },
  methods: {
    //跳转广告图
    advert(href) {
      window.open(href, "_blank");
    },
    //图书轮播左按钮
    bookLeft() {
      const box = this.$refs.booksList;
      const picWidth = 240;
      this.boxLeft += 240;
      // console.log(this.boxLeft);
      box.style.left = this.boxLeft + "px";
      box.style.transition = "all 0.5s ease-in-out";
      console.log(this.boxLeft);
      if (this.boxLeft > 0) {
        box.style.left = -picWidth * (this.topbooklist.length - 4) + "px";
        this.boxLeft = -picWidth * (this.topbooklist.length - 4);
      }
      // console.log(box.style.left);
    },
    //图书轮播右按钮
    bookRight() {
      const box = this.$refs.booksList;
      const picWidth = 240;
      this.boxLeft -= 240;
      box.style.left = this.boxLeft + "px";
      box.style.transition = "all 0.5s ease-in-out";
      console.log(this.boxLeft);
      // console.log(box.style.left);
      if (this.boxLeft < -(this.topbooklist.length - 4) * picWidth) {
        box.style.left = 0 + "px";
        this.boxLeft = 0;
      }
    },
    //切换下方tap栏
    handleClickTaps(id) {
      this.activeName = id;
      //产品首页中心
      productinfo({
        md5key: localStorage.getItem("md5key"),
        type_id: id, //默认产品分类为高中语文
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "产品首页中心");
          const data = res.retRes;
          // this.topbooklist = data.topbooklist; //顶部精选
          // this.courselist = data.courselist; //在线课程
          // this.producttypelist = data.producttypelist;//产品分类列表
          this.productlist = data.productlist; //产品列表
          if (data.productlist.length == 0) {
            this.nothingShow = true;
          } else {
            this.nothingShow = false;
          }
          console.log(this.nothingShow);
        } else {
          this.$message.error(res.retErr);
        }
      });
    },
    goAllclass() {
      this.$router.push({
        name: "ClassAll",
      });
    },
    //前往详情页
    productDetails(id, type_id) {
      console.log(id, type_id);
      if (type_id == 1) {
        this.$router.push({
          name: "ProductDetails",
          query: {
            id: id,
          },
        });
      } else if (type_id == 2) {
        this.$router.push({
          name: "ClassOnline",
          query: {
            id: id,
          },
        });
      } else if (type_id == 3) {
        this.$router.push({
          name: "JingtingDetails",
          query: {
            id: id,
          },
        });
      }
    },
    // 前往在线课程
    goCol(id) {
      this.$router.push({
        name: "ClassOnline",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  background-color: #f0f2f5;
  .title {
    padding-bottom: 20px;
    font-size: 24px;
    color: #333;
    text-align: left;
    font-weight: 600;
    // font-family: Microsoft YaHei;
    border-bottom: 1px solid #ccc;
  }
  .title2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    h3 {
      margin-left: 20px;
      font-size: 24px;
      // font-family: Microsoft YaHei;
      font-weight: 600;
      color: #333333;
    }
    p {
      margin-right: 20px;
      font-size: 14px;
      color: #666;
      cursor: pointer;
    }
    p:hover {
      color: #08a579;
    }
  }
  .banner {
    margin: 0px auto;
    width: 100%;
    .el-carousel {
      width: 100%;
      height: 100%;
      // border-radius: 20px;
      .el-carousel__item {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .recommend {
    margin: 0 auto;
    margin-top: 20px;
    width: 1200px;
    background-color: #fff;
    .jiaofuBooks {
      display: flex;
      // margin-bottom: 20px;

      .tips {
        width: 240px;
        height: 260px;
        background-image: url("../../assets/img/product_jx.png");
        text-align: center;
        overflow: hidden;
      }
      .bookSwiper {
        position: relative;
        width: 960px;
        overflow: hidden;
        .booksList {
          display: flex;
          position: absolute;
          left: 0;
          // width: 24000px;
          // white-space: nowrap;
          .box {
            width: 240px;
            height: 260px;
            text-align: center;
            cursor: pointer;
            img {
              margin-top: 36px;
              // width: 100px;
              height: 133px;
              object-fit: cover;
            }
            h4 {
              margin: 0 auto;
              width: 156px;
              margin-top: 10px;
              font-size: 14px;
              text-align: center;
              font-weight: normal;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2; // 控制多行的行数
              -webkit-box-orient: vertical;
            }
            p {
              margin-top: 15px;
              color: #939599;
              font-size: 12px;
            }
          }
          .box:hover {
            h4 {
              color: #08a579;
            }
          }
        }
        .anniu {
          display: inline-block;
          width: 25px;
          height: 35px;
          background: #000000;
          opacity: 0.3;
          color: #fff;
          font-size: 18px;
          line-height: 33px;
          text-align: center;
          cursor: pointer;
        }
        .leftN {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          border-radius: 0px 18px 18px 0px;
          i {
            margin-right: 2px;
          }
        }
        .rightN {
          position: absolute;
          transform: translateY(-50%);
          top: 50%;
          right: 0;
          border-radius: 18px 0px 0px 18px;
          i {
            margin-left: 2px;
          }
        }
      }
    }
  }
  .classOnline {
    margin: 20px auto;
    width: 1200px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    .classBox {
      display: flex;
      flex-wrap: wrap;
      margin: 20px 0;
      margin-left: 20px;
      .box {
        margin-right: 20px;
        margin-bottom: 35px;
        width: 275px;
        background-color: #fff;
        border-radius: 10px;
        cursor: pointer;
        img {
          margin-bottom: 10px;
          width: 275px;
          height: 159px;
          border-radius: 10px;
        }
        .activename {
          margin-bottom: 18px;
          width: 280px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          color: #333333;
        }
        p {
          font-size: 12px;
          color: #939599;
        }
      }
    }
    .box:hover {
      img {
        transition: 0.8s;
        // position: relative;
        // top: -10px;
        transform: translateY(-10px);
        box-shadow: 0px 2px 10px 2px #dedede;
      }
      .activename {
        color: #08a579;
      }
    }
    // .bookBox::after {
    //   content: "";
    //   width: 370px;
    // }
  }
  .series {
    margin-top: 20px;
    width: 100%;
    .content {
      width: 1200px;
      margin: 0 auto;
      .productBox {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .left {
          background-color: #fff;
          width: 840px;
          border-radius: 10px;
          .top {
            .title {
              display: flex;
              justify-content: space-between;
              h2 {
                margin: 30px 0 0 20px;
                font-size: 24px;
                font-weight: 600;
                color: #333;
              }
              span {
                margin: 36px 20px 0 0;
                font-size: 14px;
                color: #939599;
                font-weight: normal;
                cursor: pointer;
              }
            }
            .taps {
              display: flex;
              margin-top: 20px;
              .tap {
                display: flex;
                flex-direction: column;
                align-items: center;
                cursor: pointer;
                h3 {
                  margin-bottom: 12px;
                  padding: 0 25px;
                  font-size: 14px;
                  line-height: 14px;
                  font-weight: normal;
                  border-right: 1px solid #e1e2e6;
                  color: #939599;
                }
              }
              .choseTap {
                h3 {
                  color: #333;
                }
                span {
                  display: inline-block;
                  width: 48px;
                  height: 3px;
                  background: #08a579;
                }
              }
            }
          }
          .box {
            display: flex;
            // justify-content: space-between;
            flex-wrap: wrap;
            margin: 30px 0;
            margin-left: 30px;
            .boxChinese {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-bottom: 30px;
              margin-right: 20px;
              cursor: pointer;
              width: 170px;
              border: 1px solid #fff;
              .pic {
                position: relative;
                text-align: center;
                width: 150px;
                height: 150px;
                img {
                  display: inline-block;
                  position: absolute;
                  left: 0;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  margin: auto;
                  max-width: 130px;
                  max-height: 130px;
                }
              }
              .msg {
                h3 {
                  margin-bottom: 10px;
                  width: 150px;
                  font-size: 14px;
                  font-weight: normal;
                  color: #333333;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
                p {
                  margin-bottom: 10px;
                  width: 150px;
                  font-size: 12px;
                  color: #939599;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
              }
            }
            .boxChinese:nth-of-type(4n) {
              border-right: 0;
            }
            .boxChinese:hover {
              border: 1px solid #ddd;
              box-shadow: 0 0 2px 2px #f8f8f8;
            }
          }
          .nothingShow {
            text-align: center;
            img {
              height: 250px;
            }
          }
        }
        .right {
          margin-left: 20px;
          padding: 0 20px;
          width: 340px;
          height: 600px;
          background-color: #fff;
          border-radius: 10px;
          .title3 {
            display: flex;
            margin-top: 20px;
            margin-bottom: 20px;
            span {
              display: inline-block;
              position: relative;
              top: 8px;
              width: 4px;
              height: 20px;
              background: #08a579;
              border-radius: 2px;
            }
            h3 {
              margin-left: 20px;
              font-size: 24px;
              // font-family: Microsoft YaHei;
              font-weight: 600;
              color: #333333;
            }
          }
          .boxHot {
              .qian3 {
                display: flex;
                padding: 10px 0;
                // padding-left: 20px;
                cursor: pointer;
                border: 1px solid #fff;
                .pic {
                  position: relative;
                  width: 106px;
                  height: 106px;
                  img {
                    position: absolute;
                    display: inline-block;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    // right: 0;
                    margin: auto;
                    max-width: 106px;
                    max-height: 106px;
                  }
                  span {
                    display: inline-block;
                    position: relative;
                    left: 0px;
                    text-align: center;
                    font-size: 18px;
                    color: #fff;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    background: #f85230;
                    border-radius: 4px;
                  }
                }
                .msg {
                  position: relative;
                  // margin-left: 15px;
                  h3 {
                    // margin-bottom: 26px;
                    margin-top: 10px;
                    width: 180px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: normal;
                    color: #333333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2; // 控制多行的行数
                    -webkit-box-orient: vertical;
                  }
                  p {
                    position: absolute;
                    bottom: 10px;
                    font-size: 14px;
                    color: #939599;
                  }
                  .goProduct {
                    margin-top: 15px;
                    width: 90px;
                    height: 30px;
                    background-color: #08a579;
                    border-radius: 4px;
                    color: #fff;
                    text-align: center;
                    line-height: 30px;
                  }
                }
              }
              .qian3:hover {
                // border: 1px solid #ddd;
                // box-shadow: 0 0 2px 2px #f8f8f8;
                h3 {
                  color: #08a579;
                }
              }
            }
          .lists {
            display: flex;
            // margin-left: 20px;
            margin-top: 10px;
            font-size: 14px;
            color: #333333;
            line-height: 24px;
            h4 {
              margin-right: 10px;
              color: #939599;
              font-size: 18px;
              // line-height: 18px;
            }
          }
          .lists:hover {
            cursor: pointer;
            h4 {
              color: #08a579;
            }
            p {
              color: #08a579;
            }
          }
        }
      }
    }
  }
}
</style>
